<template>
	<view class="item_out" :class="[type, item_style]">
		<view class="list_item" @click="itemclick" v-if="type == 'list_show'">
			<myimg :imgsrc="check_pic_all(item.goods_cover)" width="350"></myimg>
			<view class="info_box">
				<view class="tt ell2">
					{{ item.goods_title }}
				</view>
				<view class="info_money">
					<smallPrice :min="item.current_price" :max="item.original_price" bold></smallPrice>
				</view>
			</view>
		</view>
		<view class="collect_item" @click="itemclick" v-if="type == 'collect_list_show'">
			<view class="collect_item_info">
				<view class="imgbox">
					<!-- <image class="imgs" :src="item.spec_img" mode="aspectFill"></image> -->
					<myimg :imgsrc="item.goods_cover" width="168" radius="20"></myimg>
				</view>
				<view class="info_desc">
					<view class="tt ell2">
						{{ item.goods_title }}
					</view>
					<view class="bb">
						<view class="price">
							<smallPrice :min="item.current_price" :max="item.original_price" bold :r="30" :b="36" :s="30" :m="30"></smallPrice>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order_item" :class="[orderClass]" v-if="type == 'order_spec_show'">
			<!-- {{ item.spec_id }} -->
			<view class="order_item_select" @click.stop="item_select()" v-if="!onlyshow">
				<mycheckbox :checkon="item.checked" width="30" padding="0" @check_click="item_select()"></mycheckbox>
			</view>
			<view class="order_item_info">
				<view class="imgsbox">
					<!-- <image class="imgs" :src="item.spec_img" mode="aspectFill"></image> -->
					<myimg :imgsrc="item.spec_img" width="180" radius="20"></myimg>
				</view>
				<view class="info_desc">
					<view class="tt ell">
						{{ item.goods_title }}
					</view>

					<view class="dd">
						<view class="spec">
							{{ item.spec_value || item.rule_value }}
						</view>
						<view class="number" v-if="onlyshow">x{{ item.spec_number }}</view>
					</view>

					<view class="bb">
						<view class="price">
							<smallPrice :min="item.current_price || item.goods_price" bold :r="30" :b="36" :s="30" :m="30"></smallPrice>
						</view>

						<view class="com_add_less_inp" v-if="!onlyshow">
							<view @click.stop="chang_number('reduce')" class="icons">
								<image src="/static/images/jianshao.png" mode="widthFix" class="com_add_less_inp_img"></image>
							</view>
							<view class="num_wrap">
								<input
									@blur.stop="chang_number('input')"
									@confirm.stop="chang_number('input')"
									type="number"
									v-model="inp_number"
									:style="{ width: inputWid(inp_number) }"
									class="num_input"
								/>
							</view>
							<view @click.stop="chang_number('add')" class="icons">
								<image src="/static/images/jiahao.png" mode="widthFix" class="com_add_less_inp_img"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="order_item" @click="itemclick" v-if="type == 'order_list_show'">
			<view class="order_item_info">
				<view class="imgsbox">
					<!-- <image class="imgs" :src="item.spec_img" mode="aspectFill"></image> -->
					<myimg :imgsrc="item.spec_img" width="180" radius="20"></myimg>
				</view>
				<view class="info_desc">
					<view class="tt ell">
						{{ item.goods_title }}
					</view>

					<view class="dd">
						<view class="spec">
							{{ item.rule_value }}
						</view>
						<view class="number">x{{ item.goods_number }}</view>
					</view>

					<view class="bb">
						<view class="price">
							<smallPrice :min="item.goods_price" bold :r="30" :b="36" :s="30" :m="30"></smallPrice>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon_item" :class="{ item_disable: item.disable }" @click="itemclick" v-if="type == 'coupon_item_show'">
			<image src="/static/images/coupon_bg.png" mode="widthFix" class="bg"></image>

			<!-- <image src="/static/images/coupon_bg.png" mode="widthFix" class="statu_icon"></image> -->

			<view class="statu_icon" v-if="item.statu_icon">
				<myimg :imgsrc="item.statu_icon" width="140"></myimg>
			</view>

			<view class="coupon_left">
				<view class="t1">
					<smallPrice :min="item.less_money" :r="24" :b="60" min_color="#FF5656"></smallPrice>
				</view>
				<!-- <view class="t2">
					{{ item.min_money > 0 ? `满${item.min_money}可用` : `无门槛` }}
				</view> -->
			</view>

			<view class="coupon_right">
				<view class="t_info">
					<view class="info">
						<view class="title ell2">
							<!-- <view class="mark" v-if="item.coupon_type == 1">通用券</view>
							<view class="mark" v-if="item.coupon_type == 2">商品券</view>
							<view class="mark" v-if="item.coupon_type == 3">分类券</view> -->
							<view class="mark">优惠券</view>

							{{ item.coupon_name }}
						</view>

						<view class="time">
							<!-- {{ happenTimeFun(item.failure_time, 'y.MM.dd hh.i') }}
							到期 -->

							全平台通用优惠券
						</view>
					</view>
					<view class="coupon_check" v-if="coupon_select">
						<mycheckbox :checkon="item.checked" :item="item" :index="index" width="30" padding="0" @check_click="itemclick"></mycheckbox>
					</view>
				</view>
				<view class="tips jj_kt_a">使用规则：可购买全部商品</view>
			</view>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myModuleItem',
	props: {
		good_type: {
			type: [String],
			default: 'good_detail',
		},
		item_style: '',
		item: {
			type: [Object, String],
			default: {},
		},
		index: {
			type: Number,
			default: 0,
		},
		// 类型
		type: {
			type: [Number, String],
			default: 1,
		},
		//收藏按钮
		hascoll: {
			type: Boolean,
			default: false,
		},
		//优惠券选择按钮
		coupon_select: {
			type: Boolean,
			default: false,
		},

		onlyshow: {
			type: Boolean,
			default: false,
		},
		spec_number: {
			type: [Number, String],
			default: 1,
		},
		// 是否检验默认最大最小
		check_number: {
			type: Boolean,
			default: false,
		},
		min: {
			type: [Number, String],
			default: 1,
		},
		max: {
			type: [Number, String],
			default: 1,
		},
	},

	mounted() {
		// console.log(this.item);
	},
	onLoad() {},
	data() {
		return {
			nextClick: true,
			momentlikeOn: false,
			inp_number: this.spec_number, // 数量
		};
	},
	options: {
		styleIsolation: 'shared',
	}, // 样式穿透

	computed: {
		// input输入框宽度自适应
		inputWid() {
			return function (value) {
				let l = String(value).length;
				if (l < 4) {
					return '80rpx';
				} else {
					return `${String(value).length * 26.5}` + 'rpx';
				}
			};
		},
		// input输入框宽度自适应
		orderClass() {
			let order_class = [this.type];
			if (this.item.checked) {
				order_class.push('ischecked');
			}
			return order_class;
		},
	},
	methods: {
		itemclick() {
			this.$emit('itemclick', { item: this.item, index: this.index, type: this.good_type });
		},
		// 点击收藏
		itemcoll() {
			if (!this.nextClick) return;
			this.nextClick = false;
			this.momentlikeOn = true;
			this.$emit('itemcoll', this.item, this.index);
		},
		//点赞
		momentlike() {
			if (!this.nextClick) return;
			this.nextClick = false;
			this.momentlikeOn = true;
			this.$emit('momentlike', this.item, this.index);
		},

		item_select() {
			this.$emit('item_select', { item: this.item });
		},
		chang_number(type) {
			let _this = this;
			if (type == 'add') {
				// if (false) {
				if (_this.check_number) {
					// if (_this.inp_number >= _this.max) {
					// 	_this.inp_number = _this.max;
					// } else {
					_this.inp_number++;
					// }
				} else {
					_this.inp_number++;
				}
			} else if (type == 'reduce') {
				if (_this.check_number) {
					if (_this.inp_number <= _this.min) {
						_this.inp_number = _this.min;
					} else {
						_this.inp_number--;
					}
				} else {
					_this.inp_number--;
				}
			} else if (type == 'input') {
				// if (_this.check_number) {
				// 	if (_this.inp_number > _this.max) {
				// 		_this.inp_number = _this.max;
				// 	} else if (_this.inp_number <= _this.min) {
				// 		_this.inp_number = _this.min;
				// 	} else {
				// 	}
				// } else {
				// }
				if (_this.inp_number <= _this.min) {
					_this.inp_number = _this.min;
				}
			}
			// else if (type == 'input') {
			// 	if (inp_number > stock) {
			// 		_this.show_tips(1);
			// 		_this.inp_number = stock;
			// 	} else if (inp_number <= 0) {
			// 		_this.inp_number = 1;
			// 	}
			// }

			if (_this.inp_number == _this.spec_number) return;
			_this.$nextTick(() => {
				_this.$emit('chang_number', {
					item: this.item,
					type,
					inp_number: this.inp_number,
				});
			});
		},
	},
	watch: {
		spec_number: {
			handler(newVal) {
				// console.log(newVal, 'spec_number')
				if (this.inp_number != newVal) this.inp_number = newVal;
			},
			immediate: true,
		},
		momentlikeOn(newVal) {
			if (newVal) {
				let _this = this;
				setTimeout(() => {
					_this.nextClick = true;
					_this.momentlikeOn = false;
				}, 1000);
			}
		},
	},
};
</script>

<style lang="scss">
.item_out {
	&.list_show {
		padding: 0 0 10rpx;
	}

	&.order_list_show {
		padding: 10rpx 20rpx;
	}

	&.after_sale_item {
		padding: 20rpx;
	}
	&.coupon_item_show {
		padding: 10rpx 0;
	}
}

.trends-index {
	position: relative;
	width: 286rpx;
	height: 454rpx;
	padding: 0 10rpx 14rpx 10rpx;
	box-sizing: border-box;
	// background-color: pink;

	.boxshadow {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 454rpx;
		z-index: 1;
	}

	.trends-item {
		position: relative;
		z-index: 2;
		// padding: 0 0 22rpx 0;
		width: 100%;
		height: 100%;

		.bg {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 420rpx;
			z-index: 1;
		}

		.imgbox {
			position: relative;
			width: 234rpx;
			height: 234rpx;
			margin: 0 auto;
			border-radius: 12rpx;
			overflow: hidden;

			.mark {
				font-size: 16rpx;
				position: absolute;
				right: 0;
				bottom: 14rpx;
				padding: 0 18rpx;
				height: 20rpx;
				background-color: rgba(#26272d, 0.8);
				color: #ffffff;
			}
		}

		.info-title {
			min-height: 68rpx;
			margin: 18rpx 16rpx 0 16rpx;

			.conts {
				line-height: 34rpx;
			}
		}

		.tag {
			white-space: nowrap;
			margin-top: 12rpx;
			height: 34rpx;

			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			}

			.tag-item-box {
				display: inline-block;
				padding-left: 16rpx;

				&:last-child {
					padding-right: 16rpx;
				}
			}

			.tag-item {
				padding: 0 12rpx 0 10rpx;
				height: 34rpx;
				background: #f5f5f5;
				border-radius: 8rpx;

				color: #a9505f;
				font-size: 18rpx;

				.ii {
					width: 20rpx;
					height: 20rpx;
					margin-right: 8rpx;
				}

				// &+.tag-item {
				//      margin-left: 16rpx;
				//  }
			}
		}

		.tools {
			margin: 16rpx 16rpx 0 16rpx;
			display: flex;
			align-items: center;

			.user {
				flex: 1;
				display: flex;

				.userii {
					flex-shrink: 0;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}

				.usernn {
					flex: 1;
					padding: 0 8rpx;
					margin-left: 8rpx;
					color: #767676;
				}
			}

			.give {
				flex-shrink: 0;
				position: relative;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 1px solid #808080;
				background-color: #ffffff;
				transition: all 0.3s;

				&.on {
					border: 2rpx solid #1fd1c2;
					background-color: #fff3f3;

					.giveii {
						opacity: 0;

						&.ison {
							opacity: 1;
						}
					}
				}

				.givebox {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 18rpx;
					height: 18rpx;
				}

				.giveii {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					opacity: 1;

					// transition: all .5s .3s;
					&.ison {
						opacity: 0;
					}
				}
			}
		}
	}
}

// 列表商品
.list_item {
	display: flex;
	flex-direction: column;
	width: 350rpx;
	// box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(233, 233, 233, 0.6);
	border-radius: 20rpx;
	overflow: hidden;
	background-color: #fff;
	// padding: 18rpx 16rpx 22rpx;
	// .give_abs {
	// 	position: absolute;
	// 	right: 15rpx;
	// 	top: 15rpx;
	// }

	.img_box {
		position: relative;
		width: 350rpx;
		height: 350rpx;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.info_box {
		padding: 16rpx 16rpx 12rpx;

		.tt {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #333333;
			height: 80rpx;
		}

		.info_money {
			padding: 6rpx 0;
		}
	}
}

// 列表商品
.collect_item {
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	.collect_item_info {
		display: flex;
		padding: 20rpx;
		.info_desc {
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.tt {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
			}

			.dd {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;

				.spec {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}

				.number {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}
			}

			.bb {
				margin-top: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		// .price {
		// 	padding: 18rpx 0 18rpx 10rpx;
		// }
	}
}

// 列表商品
.order_item {
	display: flex;
	overflow: hidden;
	background-color: #fff;
	transition: 'background-color' 0.2s;
	&.order_spec_show {
		padding: 24rpx 20rpx;
	}
	&.ischecked {
		background-color: #f8f8f8;
	}

	.order_item_select {
		padding-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		// .ucheckbox {
		// 	width: 30rpx;
		// 	height: 30rpx;
		// }
	}

	.order_item_info {
		width: 100%;
		display: flex;

		.imgsbox {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			background: #e8ebf1;
			// border: 6rpx solid #FFFFFF;
			flex-shrink: 0;
			overflow: hidden;

			.imgs {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: block;
				// margin-right: 24rpx;
			}
		}

		.info_desc {
			padding-left: 16rpx;
			width: 100%;

			.tt {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
			}

			.dd {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;

				.spec {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}

				.number {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}
			}

			.bb {
				margin-top: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		// .price {
		// 	padding: 18rpx 0 18rpx 10rpx;
		// }
	}
}

.coupon_item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 210rpx;
	position: relative;
	overflow: hidden;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.statu_icon {
		position: absolute;
		right: 0;
		bottom: 0;
		right: -30rpx;
		bottom: -30rpx;
	}
	.coupon_left {
		flex-shrink: 0;
		width: 200rpx;
		height: 210rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 5;

		.t2 {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 28rpx;
		}
	}

	.coupon_right {
		position: relative;
		z-index: 5;
		padding: 20rpx 20rpx 0;
		width: 100%;
		height: 100%;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		.t_info {
			display: flex;
			align-items: center;

			.info {
				width: 100%;
				padding-right: 20rpx;
				padding-bottom: 14rpx;

				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					height: 82rpx;

					.mark {
						height: 32rpx;
						background: #ff5656;
						border-radius: 16rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						line-height: 32rpx;
						padding: 0 10rpx;
						margin-right: 4rpx;

						font-size: 18rpx;
						font-weight: 400;
						color: #ffffff;

						position: relative;
						top: -4rpx;
					}
				}

				.time {
					// margin-top: 8rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.coupon_check {
				margin-top: 48rpx;
				flex-shrink: 0;
			}
		}

		.tips {
			height: 58rpx;
			display: flex;
			align-items: center;
			// justify-content: center;

			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
		}
	}
}
</style>
